<template>
	<view class="invoice-detail">
		<!-- 发票信息区块 -->
		<view class="info-block">
			<view class="block-title">发票信息</view>
			<view class="info-item">
				<text class="label">申请时间</text>
				<text class="value">2024-10-25 14:56:57</text>
			</view>
			<view class="info-item">
				<text class="label">开票状态</text>
				<text class="value status">开票中</text>
			</view>
			<view class="info-item">
				<text class="label">开票内容</text>
				<text class="value">充电费</text>
			</view>
			<view class="info-item">
				<text class="label">发票类型</text>
				<text class="value">电子发票</text>
			</view>
			<view class="info-item">
				<text class="label">开票金额</text>
				<text class="value">¥70.00</text>
			</view>
			<view class="info-item">
				<text class="label">发票抬头</text>
				<text class="value">深圳起运智联供应链科技有限公司</text>
			</view>
			<view class="info-item">
				<text class="label">纳税人识别号</text>
				<text class="value">91440300MA5GYT8Q90</text>
			</view>
		</view>

		<!-- 订单信息区块 -->
		<view class="info-block">
			<view class="block-title">订单信息</view>
			<view class="info-item">
				<text class="label">开票订单</text>
				<text class="value">88888888888888</text>
			</view>
		</view>

		<!-- 收件信息区块 -->
		<view class="info-block">
			<view class="block-title">收件信息</view>
			<view class="info-item">
				<text class="label">电子邮箱</text>
				<text class="value">748879122@qq.com</text>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="footer">
			<u-button color="#1C6EFB" shape="circle" text="重开发票" @click="reapplyInvoice"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			reapplyInvoice() {
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped lang="scss">
	.invoice-detail {
		padding: 20rpx;

		.info-block {
			background-color: #FFFFFF;
			border-radius: 12rpx;
			padding: 30rpx;
			margin-bottom: 20rpx;

			.block-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 30rpx;
			}

			.info-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 24rpx;

				&:last-child {
					margin-bottom: 0;
				}

				.label {
					color: #666;
					font-size: 28rpx;
				}

				.value {
					color: #333;
					font-size: 28rpx;
					text-align: right;
					flex: 1;
					margin-left: 20rpx;

					&.status {
						color: #FF6B00;
					}
				}
			}
		}

		.footer {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: #FFFFFF;
			padding: 20rpx 40rpx;
			padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
			padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		}
	}
</style>